<!-- eslint-disable no-alert -->
<script setup lang="ts">
import { ref } from 'vue';

/** 最大长度 */
const maxLength = 10;
/** 图标 */
const groupIcon = '<span class="k-icon k-i-search"></span>';
const groupIcon2 = '<i class="f-icon f-icon-lookup"></i>';
const groupText = '查询';
/** 绑定值 */
const bindValue1 = ref('禁用时的文字颜色展示');
/** 绑定值2 */
const bindValue2 = ref('只读时的文字颜色展示');
const myPopValue = '我的扩展的信息.';
/** 当前状态 */
const status = false;
/** 当前状态2 */
const status2 = true;
const searchText = '';
const searchText2 = '';
const searchText3 = '';
const passwdText = '';

function onEnter() {}
function onChange(val: any) {
    console.log(val);
}

</script>

<template>
    <div class="f-input-group-demo-row">
        <div class="col-2">普通文本</div>
        <div class="col-4">
            <f-input-group v-model="status" @on-enter="onEnter()"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">扩展文本按钮</div>
        <div class="col-4">
            <f-input-group :group-text="groupText"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">扩展图标按钮</div>
        <div class="col-4">
            <f-input-group :maxlength="maxLength" :group-text="groupIcon" :readonly="status"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">自定义样式</div>
        <div class="col-4">
            <f-input-group :custom-cls="'custom-cls'" :group-text="groupIcon2" v-model="searchText2"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">密码输入1</div>
        <div class="col-4">
            <f-input-group :is-password="true" v-model="passwdText"></f-input-group>
        </div>
        <div class="col-2">{{ passwdText }}</div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">只读</div>
        <div class="col-4">
            <f-input-group :group-text="groupIcon" :readonly="true" v-model="bindValue2"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">禁用</div>
        <div class="col-4">
            <f-input-group :group-text="groupIcon" :disabled="true" v-model="bindValue1"></f-input-group>
        </div>
    </div>

    <div class="f-input-group-demo-row">
        <div class="col-2">不允许编辑</div>
        <div class="col-4">
            <f-input-group :editable="false" :group-text="groupIcon" v-model="searchText2"></f-input-group>
        </div>
        <div class="col-2">{{ searchText2 }}</div>
    </div>
</template>
<style>
.f-input-group-demo-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -14px;
    margin-left: -14px;
    margin-bottom: 10px;
}
</style>
